<template>
    <div class="demo-image">
      <div v-for="url in urls" :key="url" class="block">
        <span class="demonstration">{{ fit }}</span>
        <el-image style="width: 100px; height: 100px" :src="url"/>
      </div>
    </div>
  </template>
  
  <script setup>
  import axios from 'axios'
  function getImgUrls(){
    axios({
        url:"http://localhost:8080/img/getImgUrl",
        method:"GET"
    }).then(resp=>{
        console.log(resp.data)
    }).catch(e=>{
        console.log(e)
    })
  }
//   const fits = ['fill', 'contain', 'cover', 'none']
//   const url =
//     'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
const urls=["https://t1.chei.com.cn/common/error/images/yz-error-icon.png"]
  </script>
  
  <style scoped>
  .demo-image .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    vertical-align: top;
  }
  .demo-image .block:last-child {
    border-right: none;
  }
  .demo-image .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }
  </style>